<template>
  <view class="orderList">
    <view class="head_content">
      <CustomNavbar title="Order Center" color="#fff" bg="#241e42"></CustomNavbar>
      <!-- <view class="tabs_box">
        <u-tabs
          :scrollable="false"
          :lineWidth="0"
          :list="contentList"
          :current="contentCurrent"
          :activeStyle="tabsActiveStyle"
          :inactiveStyle="tabsInactiveStyle"
          lineColor="#EE7F33"
          @change="tabsChange($event, 1)"
        />
      </view> -->
		</view>

    <view class="nodata" v-if="!dataList[contentList[this.contentCurrent].val].length">
      <u-empty
        mode="data"
        text="No data"
        icon="https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/more/%E4%BD%8D%E5%9B%BE%402x%20(4).png"
      />
    </view>
    <template v-if="!loading">
      <view class="integral order_list" v-if="contentCurrent === 1">
        <view class="rewardBox">
          <view class="rewardBox-item" v-for="item in dataList.reward" :key="item.id">
            <view class="left">
              <view class="left-title">{{ item.createTime }}</view>
              <!-- <view class="left-time">{{ item.createTime }}</view> -->
            </view>
            <view class="right">
              <view class="right-amount">{{ item.amount }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="recharge order_list" v-else-if="contentCurrent === 0">
        <view class="item" v-for="item in dataList.recharge" :key="item.id">
          <view class="header">
            <text class="title">{{ item.orderType === 'jf' ? 'Points recharge' : 'vip purchase' }}</text>
            <text class="state">completed</text>
          </view>
          <view class="body">
            <view class="icon"> </view>
            <view class="desc">
              <view class="info">
                <text class="name"></text>
                <!-- <text class="sku">大份/微辣/7分糖/加冰</text> -->
              </view>
              <view class="price"> ¥{{ item.amount }} </view>
            </view>
          </view>
          <view class="footer">
            <text class="date">{{ item.createTime }}</text>
            <!-- <view class="order_btn btn_ok">确认</view> -->
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				contentList: [
					// {
					//   name: '积分列表',
					//   type: 'order.list',
					//   val: 'integral',
					//   current: 0
					// },
					{
						name: 'Recharge List',
						type: 'order.chargeList',
						val: 'recharge',
						current: 0
					},
					{
						name: 'Reward List',
						type: 'order.rewardList',
						val: 'reward',
						current: 1
					}
				],
				dataList: {
					integral: [],
					recharge: [],
          reward: []
				},
				rechargeList: [],
				contentCurrent: 0,
				refresh: false,
				tabsActiveStyle: {
					// backgroundImage: `${getApp().globalData.isBgColor}`,
					// backgroundClip:'text',
					'-webkitBackgroundClip': 'text',
					color: 'transparent',
					WebkitTextFillColor: 'transparent',
					fontSize: '32rpx',
					fontWeight: 'bold',
					backgroundColor: '#fff',
					// color: '#EE7F33',

					fontSize: '32rpx',
					fontWeight: 'bold'
				},
				tabsInactiveStyle: {
					color: '#666666'
				},
				pageNo: 1,
				pages: 1,
				total:0
			}
		},
		onShow() {
			this.loadTableData()
		},
		onReachBottom() {
			let type = this.contentList[this.contentCurrent]
			if(this.dataList[type.val].length < this.total){
				
				++this.pageNo
				this.loadTableData(false)
			}
		},
		onPullDownRefresh() {
			this.loadTableData()
		},
		methods: {
			tabsChange(i) {
				if (i.index === this.contentCurrent) {
					return
				}
				this.contentCurrent = i.index
				this.loadTableData()
			},
			// loadData(refresh=true) {
			//   if(refresh){
			//     this.pageNo = 1
			//   }
			//   this.$request('video.allAddons', { current: this.pageNo }).then(resp => {
			//     this.contentList = refresh ? resp.data.records : [...this.contentList, ...resp.data.records]
			//   })
			//   // this.loadTableData()
			// },
			loadTableData(refresh = true) {
				this.loading = true
				if (refresh) {
					this.pageNo = 1
				}
				let type = this.contentList[this.contentCurrent]
				let vm = this
        uni.showLoading({ title: 'Loading...' })
				this.$request(type.type, {
					current: this.pageNo,pageSize: 50
				}).then(resp => {
           uni.hideLoading()
					uni.stopPullDownRefresh()
					vm.dataList[type.val] = refresh ? resp.data.records : [...vm.dataList[type.val], ...resp
							.data.records
					];
					vm.total = resp.data.total
					console.log(vm.dataList,'vm.dataList')
					vm.pages = resp.data.pages
					vm.loading = false
				}).catch(() => {
           uni.hideLoading()
					uni.stopPullDownRefresh()
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.order_list {
    .rewardBox{
      padding: 0 30rpx;
    }
		.rewardBox-item {
			height: 140rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #1C1C1C;
			line-height: 2;

			.left-title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #fff;
			}

			.left-time {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.right-amount {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF00E3;
			}
		}

		.item {
			margin: 30rpx;
			padding: 24rpx 40rpx;
			background: #1c1c1c;
			box-shadow: 4px 6px 12px 0px rgba(111, 111, 111, 0.06);
			border-radius: 16px;

			.header {
				width: 100%;
				font-size: 34rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}

				.state {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #67c23a;
				}
			}

			.body {
				display: flex;
				align-items: center;
				margin: 30rpx 0;

				.icon {
					width: 189rpx;
					height: 189rpx;
					background-image: url('../../static/icons/jifeng.png');
					border-radius: 18rpx;
					background-color: #333;
					background-size: cover;
				}

				.desc {
					flex: 1;
					padding-left: 18rpx;
					// display: flex;
					height: 100%;

					.info {
						display: flex;
						flex-direction: column;

						.name {
							color: #ffffff;
							font-size: 34rpx;
							font-weight: 500;
							margin-bottom: 10rpx;
						}

						.sku {
							color: #666666;
							font-size: 28rpx;
						}
					}

					.price {
						text-align: right;
						color: #ffe300;
						font-size: 32rpx;
						margin-top: 48rpx;
					}
				}
			}

			.footer {
				display: flex;

				.date {
					color: #ffffff;
					text-align: left;
				}

				.btn_ok {
					width: 180rpx;
					border-radius: 40rpx;
					text-align: center;
					color: #ffffff;
					font-weight: 400;
					font-size: 32rpx;
					letter-spacing: 5rpx;
					background: linear-gradient(90deg, #a608c5 0%, #03f8ff 100%);
				}
			}
		}
	}

	// .icon.integral {
	//   background-image: url('../../static/icons/jifeng.png');
	//   width: 136rpx;
	//   height: 136rpx;
	// }

	.order_btn {
		padding: 16rpx 30rpx;
	}

	.nodata {
		margin-top: 204rpx;
	}

	.integral .icon {
		display: none;
	}
</style>
